
<script setup lang="ts">
import tinymce from 'tinymce/tinymce';
import TinymceEditor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import 'tinymce/models/dom';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/image';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/table';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/code';
import 'tinymce/plugins/searchreplace';

import useSettingsStore from '@/store/modules/settings';
import { uploadFileRequest } from '@/api/uploadFileRequest';

const settingsStore = useSettingsStore();

const defaultSetting = ref({
  language_url: 'tinymce/langs/zh-Hans.js',
  language: 'zh-Hans',
  skin_url:
    settingsStore.settings.app.colorScheme === 'light'
      ? 'tinymce/skins/ui/oxide'
      : 'tinymce/skins/ui/oxide-dark',
  content_css:
    settingsStore.settings.app.colorScheme === 'light'
      ? 'tinymce/skins/content/default/content.min.css'
      : 'tinymce/skins/content/dark/content.min.css',
  min_height: 250,
  max_height: 600,
  selector: 'textarea',
  plugins:
    'autolink autoresize fullscreen image insertdatetime link lists media preview table wordcount code searchreplace',
  toolbar:
    'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor removeformat | link image media table insertdatetime searchreplace | preview code fullscreen',
  branding: false,
  menubar: false,
  toolbar_mode: 'sliding',
  insertdatetime_formats: [
    '%Y年%m月%d日',
    '%H点%M分%S秒',
    '%Y-%m-%d',
    '%H:%M:%S',
  ],
  // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_upload_handler
  images_upload_handler: (blobInfo: any) => {
    var blob = blobInfo.blob();
    // 将Blob转换为File
    var file = new File([blob], 'test.png', {
      lastModified: new Date().getTime(), // 或者使用文件的实际最后修改时间
      type: blob.type,
    });
    return new Promise(resolve => {
      uploadFileRequest({
        path: 'edit_event/',
        file: file,
      }).then(url => {
        resolve(url);
      });
      // const img = `data:image/jpeg;base64,${blobInfo.base64()}`;
      // resolve(img);
    });
  },
});

const content = ref('<h1>Fantastic-admin</h1>');

onMounted(() => {
  tinymce.init({});
});

function open(url: string) {
  window.open(url, '_blank');
}
</script>
  
<template>
  <TinymceEditor v-model="content" :init="defaultSetting" />
</template>
  
